import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import {
    HomeOutlined,
    CompassOutlined,
    PlusCircleOutlined,
    BellOutlined,
    UserOutlined,
} from '@ant-design/icons';
import styled from 'styled-components';

const { Footer } = Layout;

const StyledFooter = styled(Footer)`
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 0;
  background: #fff;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
`;

const StyledMenu = styled(Menu)`
  display: flex;
  justify-content: space-around;
  border: none;
  
  .ant-menu-item {
    flex: 1;
    text-align: center;
    margin: 0 !important;
    padding: 8px 0 !important;
  }

  .anticon {
    font-size: 20px;
  }
`;

const Navigation: React.FC = () => {
    const navigate = useNavigate();
    const location = useLocation();

    // 定义需要隐藏导航栏的路径
    const hiddenPaths = ['/settings', '/profile/edit', '/profile/tags']; // 根据需要添加其他路径

    // 如果当前路径在 hiddenPaths 中，则不渲染导航栏
    if (hiddenPaths.includes(location.pathname)) {
        return null;
    }

    const menuItems = [
        {
            key: '/',
            icon: <HomeOutlined />,
            label: '首页',
        },
        {
            key: '/discover',
            icon: <CompassOutlined />,
            label: '发现',
        },
        {
            key: '/create',
            icon: <PlusCircleOutlined style={{ fontSize: '24px', color: '#FF7D00' }} />,
            label: '发布',
        },
        {
            key: '/messages',
            icon: <BellOutlined />,
            label: '消息',
        },
        {
            key: '/profile',
            icon: <UserOutlined />,
            label: '我的',
        },
    ];

    return (
        <StyledFooter>
            <StyledMenu
                mode="horizontal"
                selectedKeys={[location.pathname]}
                onClick={({ key }) => navigate(key)}
                items={menuItems}
            />
        </StyledFooter>
    );
};

export default Navigation; 